<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园失物招领系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="app">
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="navbar-brand">校园失物招领系统</div>
            <div class="navbar-menu">
                <a href="#" class="active" data-page="home">首页</a>
                <a href="#" data-page="lost">寻物启事</a>
                <a href="#" data-page="found">招领启事</a>
            </div>
            <div class="navbar-user">
                <!-- 未登录状态 -->
                <div class="guest-buttons" id="guestButtons">
                    <button class="btn btn-text" data-page="login">登录</button>
                    <button class="btn btn-primary" data-page="register">注册</button>
                </div>
                <!-- 已登录状态 -->
                <div class="user-info hidden" id="userInfo">
                    <span class="username"></span>
                    <button class="btn btn-primary" data-page="publish">发布</button>
                    <button class="btn btn-text" id="logoutBtn">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main">
        <div class="container">
            <!-- 首页 -->
            <section class="page" id="homePage">
                <div class="search-box">
                    <input type="text" placeholder="搜索物品" id="searchInput">
                    <button class="btn btn-primary" id="searchBtn">搜索</button>
                </div>
                <div class="items-grid" id="itemsList"></div>
            </section>

            <!-- 登录页面 -->
            <section class="page hidden" id="loginPage">
                <div class="form-card">
                    <h2>用户登录</h2>
                    <form id="loginForm">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="username" required>
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </form>
                </div>
            </section>

            <!-- 注册页面 -->
            <section class="page hidden" id="registerPage">
                <div class="form-card">
                    <h2>用户注册</h2>
                    <form id="registerForm">
                        <div class="form-group">
                            <label>用户名</label>
                            <input type="text" name="username" required>
                        </div>
                        <div class="form-group">
                            <label>密码</label>
                            <input type="password" name="password" required>
                        </div>
                        <div class="form-group">
                            <label>邮箱</label>
                            <input type="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label>手机号</label>
                            <input type="tel" name="phone" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">注册</button>
                    </form>
                </div>
            </section>

            <!-- 发布页面 -->
            <section class="page hidden" id="publishPage">
                <div class="form-card">
                    <h2>发布物品信息</h2>
                    <form id="publishForm">
                        <div class="form-group">
                            <label>物品名称</label>
                            <input type="text" name="name" required>
                        </div>
                        <div class="form-group">
                            <label>物品描述</label>
                            <textarea name="description" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>地点</label>
                            <input type="text" name="location" required>
                        </div>
                        <div class="form-group">
                            <label>图片</label>
                            <label class="file-upload-label" for="imageInput">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <span>选择图片</span>
                            </label>
                            <input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(this)">
                            <div class="file-name" id="fileName"></div>
                            <div class="file-preview" id="imagePreview"></div>
                        </div>
                        <div class="form-group">
                            <label>类型</label>
                            <div class="radio-group">
                                <label>
                                    <input type="radio" name="status" value="LOST" required>
                                    寻物启事
                                </label>
                                <label>
                                    <input type="radio" name="status" value="FOUND">
                                    招领启事
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">发布</button>
                    </form>
                </div>
            </section>

            <!-- 寻物启事页面 -->
            <section class="page hidden" id="lostPage">
                <h2>寻物启事</h2>
                <div class="items-grid" id="lostItemsList"></div>
            </section>

            <!-- 招领启事页面 -->
            <section class="page hidden" id="foundPage">
                <h2>招领启事</h2>
                <div class="items-grid" id="foundItemsList"></div>
            </section>

            <!-- 详情页面 -->
            <section class="page hidden" id="detailPage">
                <div class="detail-card">
                    <div class="detail-header">
                        <button class="btn btn-text" onclick="showPage('home')">
                            <i class="fas fa-arrow-left"></i> 返回
                        </button>
                        <div class="item-status" id="detailStatus"></div>
                    </div>
                    <div class="detail-content">
                        <div class="detail-image" id="detailImage"></div>
                        <div class="detail-info">
                            <h2 id="detailTitle"></h2>
                            <p class="detail-description" id="detailDescription"></p>
                            <div class="detail-meta">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span id="detailLocation"></span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-clock"></i>
                                    <span id="detailTime"></span>
                                </div>
                                <div class="meta-item">
                                    <i class="far fa-user"></i>
                                    <span id="detailUser"></span>
                                </div>
                            </div>
                            <div class="detail-actions" id="detailActions">
                                <!-- 认领按钮将由JavaScript动态添加 -->
                            </div>
                        </div>
                    </div>
                    <div class="detail-comments">
                        <h3>评论区</h3>
                        <div class="comments-list" id="commentsList"></div>
                        <div class="comment-form" id="commentForm">
                                <textarea
                                        placeholder="写下你的评论..."
                                        id="commentContent"
                                        maxlength="500"
                                ></textarea>
                            <button class="btn btn-primary" onclick="submitComment()">
                                发表评论
                            </button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
</div>

<script src="js/main.js"></script>
</body>
</html>